<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>单一迁移轨迹</title>
  <script include="jquery" src="./static/libs/include-lib-local.js"></script>
  <script include="language,proj4,mapv" src="./static/libs/include-mapboxgl-local.js"></script>
  <link href="./static/demo/mapboxgl/example/style.css" rel="stylesheet" type="text/css" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map">
    <div id="mouse-position">
    </div>
  </div>
  <script>
    //一定要去mapbox注册一个key,这个key会失效的
    mapboxgl.accessToken = 'pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA';
    var map = new mapboxgl.Map({
      container: 'map', // 绑定div
      style: 'mapbox://styles/mapbox/dark-v9', // 使用MapBox官方的样式
      center: [114.321317, 30.398428],
      zoom: 3
    });

    map.addControl(new MapboxLanguage(), 'top-right');//中文支持      
    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
    //注册鼠标移动事件
    map.on('mousemove', function (e) {
      //经纬度坐标转web墨卡托
      const earthRad = 6378137.0;
      const x = e.lngLat.lng * Math.PI / 180 * earthRad;
      const a = e.lngLat.lat * Math.PI / 180;
      const y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
      document.getElementById('mouse-position').innerHTML = "X轴：" + x.toFixed(2) + "，Y轴：" + y.toFixed(2);
    });
    $.get('../../static/data/mapv/china.geojson', function (geojson) {
      geojson = JSON.parse(geojson);
      var geojsonOptions = {
        gradient: {
          0: 'rgba(55, 50, 250, 0.4)',
          1: 'rgba(55, 50, 250, 1)'
        },
        max: 354551,
        draw: 'intensity'
      };

      var geojsonDataSet = mapv.geojson.getDataSet(geojson);

      var to = '北京';

      var qianxi = new mapv.DataSet([{
        from: '河北',
        count: 354551,
        to: to,
      },
      {
        from: '天津',
        count: 97323,
        to: to,
      },
      {
        from: '山东',
        count: 28664,
        to: to,
      },
      {
        from: '山西',
        count: 16650,
        to: to,
      },
      {
        from: '辽宁',
        count: 14379,
        to: to,
      },
      {
        from: '河南',
        count: 10980,
        to: to,
      },
      {
        from: '内蒙古',
        count: 9603,
        to: to,
      },
      {
        from: '江苏',
        count: 4536,
        to: to,
      },
      {
        from: '上海',
        count: 3556,
        to: to,
      },
      {
        from: '广东',
        count: 2600,
        to: to,
      },
      ]);

      var qianxiData = qianxi.get();

      var lineData = [];
      var pointData = [];
      var textData = [];
      var timeData = [];

      var citys = {}

      for (var i = 0; i < qianxiData.length; i++) {
        var fromCenter = mapv.utilCityCenter.getCenterByCityName(qianxiData[i].from);
        var toCenter = mapv.utilCityCenter.getCenterByCityName(qianxiData[i].to);
        if (!fromCenter || !toCenter) {
          continue;
        }
        citys[qianxiData[i].from] = qianxiData[i].count;
        citys[qianxiData[i].to] = 100;
        pointData.push({
          geometry: {
            type: 'Point',
            coordinates: [fromCenter.lng, fromCenter.lat]
          }
        });
        pointData.push({
          geometry: {
            type: 'Point',
            coordinates: [toCenter.lng, toCenter.lat]
          }
        });
        textData.push({
          geometry: {
            type: 'Point',
            coordinates: [fromCenter.lng, fromCenter.lat]
          },
          text: qianxiData[i].from
        });
        textData.push({
          geometry: {
            type: 'Point',
            coordinates: [toCenter.lng, toCenter.lat]
          },
          text: qianxiData[i].to
        });

        var curve = mapv.utilCurve.getPoints([fromCenter, toCenter]);

        for (j = 0; j < curve.length; j++) {
          timeData.push({
            geometry: {
              type: 'Point',
              coordinates: curve[j]
            },
            count: 1,
            time: j
          });
        }

        lineData.push({
          geometry: {
            type: 'LineString',
            coordinates: curve
            //coordinates: [[fromCenter.lng, fromCenter.lat], [toCenter.lng, toCenter.lat]]
          },
          count: 30 * Math.random()
        });

      }

      var data = geojsonDataSet.get({
        filter: function (item) {

          if (!citys[item.name]) {
            return false;
          }

          item.count = citys[item.name];
          return true;
        }
      });
      geojsonDataSet = new mapv.DataSet(data);

      new mapboxgl.zondy.MapvLayer(map, geojsonDataSet, geojsonOptions);

      var textDataSet = new mapv.DataSet(textData);

      var textOptions = {
        context: '2d',
        draw: 'text',
        font: '14px Arial',
        fillStyle: 'white',
        shadowColor: 'yellow',
        shadowBlue: 10,
        zIndex: 11,
        shadowBlur: 10
      }

      new mapboxgl.zondy.MapvLayer(map, textDataSet, textOptions);

      var lineDataSet = new mapv.DataSet(lineData);

      var lineOptions = {
        context: '2d',
        strokeStyle: 'rgba(255, 250, 50, 0.8)',
        shadowColor: 'rgba(255, 250, 50, 1)',
        shadowBlur: 20,
        lineWidth: 2,
        zIndex: 100,
        draw: 'simple'
      }

      new mapboxgl.zondy.MapvLayer(map, lineDataSet, lineOptions);

      var pointOptions = {
        context: '2d',
        fillStyle: 'rgba(254,175,3,0.7)',
        shadowColor: 'rgba(55, 50, 250, 0.5)',
        shadowBlur: 10,
        size: 5,
        zIndex: 10,
        draw: 'simple'
      }

      var pointDataSet = new mapv.DataSet(pointData);

      new mapboxgl.zondy.MapvLayer(map, pointDataSet, pointOptions);


      var timeDataSet = new mapv.DataSet(timeData);

      var timeOptions = {
        context: '2d',
        fillStyle: 'rgba(255, 250, 250, 0.5)',
        zIndex: 200,
        size: 2.5,
        animation: {
          type: 'time',
          stepsRange: {
            start: 0,
            end: 50
          },
          trails: 10,
          duration: 2,
        },
        draw: 'simple'
      }

      new mapboxgl.zondy.MapvLayer(map, timeDataSet, timeOptions);

    });
  </script>


</body>

</html>